<%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<%@ include file="/common/taglibs.jsp" %>
<%@page contentType="text/html;charset=UTF-8" %>
<%@page pageEncoding="UTF-8" %>
<html>
<head>
    <title>用户星卡管理</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/history/history-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/json/json-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datasource/datasource-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/datatable/datatable-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/paginator/paginator-min.js"></script>

    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />

    <link rel="stylesheet" href="/batch/resources/styles/main.css" type="text/css"/>
    <link rel="stylesheet" href="/batch/resources/styles/colors.css" type="text/css"/>
    <link rel="stylesheet" href="/batch/resources/styles/local.css" type="text/css"/>

    <link type="text/css" rel="stylesheet" href="/static/scripts/timepicker/js/jquery-ui-timepicker-addon.css"/>
    <link type="text/css" rel="stylesheet" href="/static/scripts/timepicker/css/ui-lightness/jquery-ui-1.8.16.custom.css"/>

    <script type="text/javascript" src="/static/scripts/timepicker/js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/static/scripts/timepicker/js/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="/static/scripts/timepicker/js/jquery-ui-sliderAccess.js"></script>
    <script type="text/javascript" src="/static/scripts/timepicker/js/jquery-ui-timepicker-addon.js"></script>


    <script type="text/javascript" src="/static/scripts/user/user.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#cardExpirationDate').datepicker({dateFormat: "yy-mm-dd", minDate:"+1d"});
        });
    </script>
    <style type="text/css">
        .yui-pe .yui-pe-content {
            display:none;
        }
    </style>
</head>
<body class="yui-skin-sam">
<form:form commandName="user" method="post" action="/ozing/users/cards" id="userForm">
<form:hidden path="id" id="id"/>
<form:hidden path="username" id="username"/>
    <fieldset>
        <legend>用户星卡详情</legend>

        <div class="yui-g">
        <div>
            <div class="operator-btn">
                <div>
                    <input type="button" id="returnUserListBtn" name="returnUserListBtn"
                           value='返回用户列表'>
                    <input type="button" id="refreshUserEditBtn" name="refreshUserEditBtn"
                           value='<fmt:message key="refresh"/>'>
                    &nbsp;&nbsp;&nbsp;
                    <input type="button" name="gift_card_to_user_btn" value='赠送星卡' id="gift_card_to_user_btn"/>
                    &nbsp;&nbsp;&nbsp;
                    <input type="button" name="gift_his_reset_btn" value='重置赠卡历史' id="gift_his_reset_btn"/>
                </div>
            </div>
             <div class="operator-btn" style="padding-left: 10px;">
                 <table class="bordered-table">
                     <tr>
                         <td style="width: 20%">用户资料</td>
                         <td style="width: 30%">用户设备</td>
                         <td style="width: 15%">可用积分</td>
                         <td style="width: 35%">赠卡历史</td>
                     </tr>
                     <tr>
                         <td style="width: 20%">
                             <table class="bordered-table">
                                 <tr>
                                     <th>属性</th>
                                     <th>值</th>
                                 </tr>
                                 <tr class="name-sublevel1-odd">
                                     <td>用户名</td>
                                     <td>${user.username}</td>
                                 </tr>
                                 <tr class="name-sublevel1-even">
                                     <td>性别</td>
                                     <td>${(user.gender!=null && user.gender eq 'male')?'男':'女'}</td>
                                 </tr>
                                 <tr class="name-sublevel1-odd">
                                     <td>邮箱</td>
                                     <td><c:if test="${not empty user.contact.email}">${user.contact.email}</c:if></td>
                                 </tr>
                                 <tr class="name-sublevel1-even">
                                     <td>注册时间</td>
                                     <td><fmt:formatDate value="${user.dateAdded}" type="date"
                                                         pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                 </tr>
                             </table>
                         </td>
                         <td style="width: 30%">
                             <c:if test="${not empty user.devices}">
                                 <table class="bordered-table">
                                     <tr>
                                         <th>设备编号</th>
                                         <th>设备类型</th>
                                         <th>注册时间</th>
                                     </tr>
                                     <c:forEach items="${user.devices}" var="device" varStatus="status">
                                         <tr class="<c:if test="${status.index%2==0}">name-sublevel1-odd</c:if><c:if test="${status.index%2!=0}">name-sublevel1-even</c:if>">
                                             <td>${device.deviceNumber} </td>
                                             <td>${device.deviceModel}</td>
                                             <td><fmt:formatDate value="${device.dateAdded}" type="date"
                                                                 pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                         </tr>
                                     </c:forEach>
                                 </table>
                             </c:if>
                         </td>
                         <td style="width: 15%">
                             <table class="bordered-table">
                                 <tr>
                                     <th>类型</th>
                                     <th>星币值</th>
                                 </tr>
                                 <tr class="name-sublevel1-odd">
                                     <td>总星币</td>
                                     <td>${totalBalance}</td>
                                 </tr>
                                 <tr class="name-sublevel1-even">
                                     <td>有效星币</td>
                                     <td>${validBalance}</td>
                                 </tr>
                                 <tr class="name-sublevel1-odd">
                                     <td>锁定星币</td>
                                     <td>${lockedBalance}</td>
                                 </tr>
                             </table>
                         </td>
                         <td style="width: 35%">
                             <c:if test="${not empty cardGiftHis}">
                                 <table class="bordered-table">
                                     <tr>
                                         <th>金额</th>
                                         <th>卡号</th>
                                         <th>赠送设备</th>
                                         <th>赠卡时间</th>
                                     </tr>
                                     <c:forEach items="${cardGiftHis}" var="his" varStatus="status">
                                         <tr class="<c:if test="${status.index%2==0}">name-sublevel1-odd</c:if><c:if test="${status.index%2!=0}">name-sublevel1-even</c:if>">
                                             <td>${his.cardParValue} </td>
                                             <td>${his.cardId} </td>
                                             <td>${his.device.deviceNumber}(${his.device.deviceModel})</td>
                                             <td><fmt:formatDate value="${his.dateAdded}" type="date"
                                                                 pattern="yyyy-MM-dd HH:mm:ss"/></td>
                                             </tr>
                                     </c:forEach>
                                   </table>
                               </c:if>
                         </td>

                 </tr>
                 </table>
             </div>
            <div class="operator-btn">
            <table style="width: 100%;">
                <tr>
                    <td style="padding-left: 20px; padding-bottom: 5px;">
                        星卡列表
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="user_cards_table_div">
                            <table id="user_cards_table">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>卡号</th>
                                    <th>卡片面值</th>
                                    <th>余额</th>
                                    <th>锁定余额</th>
                                    <th>激活日期</th>
                                    <th>过期日期</th>
                                    <th>有效状态</th>
                                    <th>卡片类型</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <c:forEach items="${user.userOzingCards}" var="card" varStatus="status">
                                    <tr>
                                        <td>${card.id}</td>
                                        <td>${card.cardId}</td>
                                        <td>${card.cardParValue}</td>
                                        <td>${card.cardBalance}</td>
                                        <td>${card.cardLockedBalance}</td>
                                        <td><fmt:formatDate value="${card.cardActivationDate}" type="date"
                                                            pattern="yyyy-MM-dd"/></td>
                                        <td><fmt:formatDate value="${card.cardExpirationDate}" type="date"
                                                            pattern="yyyy-MM-dd"/></td>
                                        <td>${card.active}</td>
                                        <td>${card.cardType}</td>
                                        <td><fmt:formatDate value="${card.dateAdded}" type="date"
                                                            pattern="yyyy-MM-dd HH:mm:ss"/></td>da
                                    </tr>
                                </c:forEach>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="padding-left: 20px; padding-bottom: 5px;">
                        星币操作明细:
                        <select id="cards_selector" name="cards_selector">
                             <option value="">--</option>
                            <c:forEach items="${user.userOzingCards}" var="card" varStatus="status">
                                <option value="${card.cardId}">${card.cardId}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="user_cards_thread"></div>
                        <div id="user_cards_thread_paging" class="paging"></div>
                    </td>
                </tr>
            </table>
        </div>
        </div>
       </div>
    </fieldset>
</form:form>

<div class="yui-g">
    <div class="hd"><b>免费记录</b></div>
    <div id="txs-thread-paging_top" class="paging"></div>
    <div id="txs-thread-list"></div>
    <div id="txs-thread-paging" class="paging"></div>
</div>

<div id="dialog_add_gift_card" class="yui-pe-content">
    <div class="hd">请输入赠送星卡信息</div>
    <div class="bd">
            <label for="gift_card_par_value">星卡面额:</label><input type="text" name="gift_card_par_value" id="gift_card_par_value"/>
            <label for="cardExpirationDate">过期日期:</label><input type="text" name="cardExpirationDate" id="cardExpirationDate" />
    </div>
</div>

</body>
</html>
